<script setup>
import { ref, Suspense } from 'vue'
import bgImg from '../../../public/flylineChart/5e6997de17c6a324d0ea65363c54594d1371abf5fa054-53Ru0E_fw1200webp.webp';
import icon from '../../../public/flylineChart/FFFFFFFF.png'
import markers from '../../../public/flylineChart/7784.png'
import EarthEcharts from './components/EarthEcharts/EarthEcharts.vue'
import LinechartEcharts from './components/LinechartEcharts/LinechartEcharts.vue'
import ChinaMap from './components/ChinaMap/ChinaMap.vue'
const activeData = ref({
  data: [
    { name: '周口', value: 55 },
    { name: '南阳', value: 120 },
    { name: '西峡', value: 78 },
    { name: '驻马店', value: 66 },
    { name: '新乡', value: 80 }
  ],
  radius: '60%', // 环形半径
});

const waterData = ref({
  data: [66, 45],
  shape: 'roundRect'
})

const capsuleData = ref({
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '郑州',
      value: 55
    },
    {
      name: '西峡',
      value: 98
    }
  ]
})

const flylineData = ref({
  points: [
    {
      name: '郑州',
      coordinate: [0.48, 0.35],
      icon: {
        src: markers,
        width: 30,
        height: 30
      },
      text: {
        color: '#fb7293'
      }
    },
    {
      name: '新乡',
      coordinate: [0.49, 0.17]
    },
    {
      name: '焦作',
      coordinate: [0.73, 0.39]
    },
    {
      name: '开封',
      coordinate: [0.69, 0.50]
    },
    {
      name: '许昌',
      coordinate: [0.43, 0.50]
    },
    {
      name: '平顶山',
      coordinate: [0.30, 0.54]
    },
    {
      name: '洛阳',
      coordinate: [0.15, 0.33]
    },
    {
      name: '周口',
      coordinate: [0.55, 0.55]
    },
    {
      name: '漯河',
      coordinate: [0.66, 0.66]
    },
    {
      name: '南阳',
      coordinate: [0.39, 0.66]
    },
    {
      name: '信阳',
      coordinate: [0.55, 0.88]
    },
    {
      name: '驻马店',
      coordinate: [0.55, 0.67]
    },
    {
      name: '济源',
      coordinate: [0.27, 0.36]
    },
    {
      name: '三门峡',
      coordinate: [0.1, 0.45]
    },
    {
      name: '商丘',
      coordinate: [0.80, 0.25]
    },
    {
      name: '鹤壁',
      coordinate: [0.59, 0.23]
    },
    {
      name: '濮阳',
      coordinate: [0.93, 0.10]
    },
    {
      name: '安阳',
      coordinate: [0.88, 0.38]
    }
  ],
  lines: [
    {
      source: '新乡',
      target: '郑州'
    },
    {
      source: '焦作',
      target: '郑州'
    },
    {
      source: '开封',
      target: '郑州'
    },
    {
      source: '许昌',
      target: '郑州'
    },
    {
      source: '平顶山',
      target: '郑州'
    },
    {
      source: '洛阳',
      target: '郑州'
    },
    {
      source: '周口',
      target: '郑州'
    },
    {
      source: '漯河',
      target: '郑州'
    },
    {
      source: '南阳',
      target: '郑州'
    },
    {
      source: '信阳',
      target: '郑州'
    },
    {
      source: '驻马店',
      target: '郑州'
    },
    {
      source: '济源',
      target: '郑州'
    },
    {
      source: '三门峡',
      target: '郑州'
    },
    {
      source: '商丘',
      target: '郑州'
    },
    {
      source: '鹤壁',
      target: '郑州'
    },
    {
      source: '濮阳',
      target: '郑州'
    },
    {
      source: '安阳',
      target: '郑州'
    }
  ],
  icon: {
    show: true,
    src: icon
  },
  text: {
    show: true,
    fontSize: 10,
  },
  bgImgSrc: bgImg
})

const skip = () => {
  console.log('跳转路由')
}

</script>

<template>
  <div class="content-cg">
    <dv-full-screen-container>
      <!-- 上 -->
      <div class="home-top home-layout">
        <div class="top-item1"><dv-decoration-2 class="wh100" /></div>

        <div class="top-item2">
          <div class="title-decoration8">
            <dv-decoration-8 class="wh100" />
          </div>
          <div class="title">
            <dv-decoration-11 class="wh100">全球数据中心</dv-decoration-11>

          </div>
          <div class="title-decoration8">
            <dv-decoration-8 :reverse="true" class="wh100" />
          </div>
        </div>

        <div class="top-item3"><dv-decoration-2 style="width:100%" /></div>
      </div>

      <!-- 中 -->
      <div class="home-centre home-layout">
        <div class="centre-item1">
          <div class="centre-item-left1">
            <dv-border-box-1>
              <dv-active-ring-chart :config="activeData" class="wh100" />
            </dv-border-box-1>
          </div>
          <div class="centre-item-left2">
            <!-- <dv-border-box-1> -->
            <dv-water-level-pond :config="waterData" style="height:100%;" />
            <!-- </dv-border-box-1> -->
          </div>
        </div>
        <div class="centre-item2">
          <EarthEcharts />
        </div>
        <div class="centre-item3">
          <div class="centre-item-right1">
            <dv-border-box-2 class="wh100">
              <dv-capsule-chart :config="capsuleData" class="wh100" />
            </dv-border-box-2>
          </div>
          <div class="centre-item-right2">
            <dv-border-box-8 class="wh100">
              <dv-flyline-chart-enhanced :config="flylineData" style="width:100%;height:100%;" />
            </dv-border-box-8>
          </div>
        </div>
      </div>

      <!-- 下 -->
      <div class="home-bottom home-layout">
        <div class="bottom-item1">
          <dv-border-box-1>
            <LinechartEcharts />
          </dv-border-box-1>
        </div>
        <div class="bottom-item2" @click="skip">
          <dv-border-box-6>
            <!-- 异步加载组件：由于<ChinaMap/>组件是异步组件，由于该组件中有请求，可能会出现，数据还没有请求到，组件就已经加载出来了，导致报错 -->
            <!-- 使用了Suspense组件来解决中国问题，<Suspense>组件可以使<ChinaMap/>组件的数据加载完成了之后再加载该组件 -->
            <Suspense>
              <!-- 默认加载 -->
              <template #default>
                <ChinaMap />
              </template>
              <!-- 默认加载之前加载，如果<ChinaMap/>组件需要较长时间才加载出来，则需要线加载出loading动画 -->
              <template #fallback>
                <div>loading......</div>
              </template>
            </Suspense>

          </dv-border-box-6>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<style scoped>
@import './home.css';
</style>
